<template>
  <view class="xen-app-date-picker">
    <picker
      class="date-picker"
      mode="date"
      :value="modelValue"
      :start="startDate"
      :end="endDate"
      :disabled="disabled"
      @change="handleDateChange"
      @cancel="handleCancel"
    >
      <view 
        class="date-picker-display" 
        :class="{ 
          'has-value': hasValue, 
          'disabled': disabled,
          'has-error': hasError 
        }"
      >
        <view class="date-picker-content">
          <text class="date-picker-text" :class="{ 'placeholder': !hasValue }">
            {{ displayText }}
          </text>
          <uni-icons 
            type="calendar" 
            size="16" 
            :color="disabled ? '#ccc' : hasError ? '#ff5252' : '#999'"
          ></uni-icons>
        </view>
      </view>
    </picker>
  </view>
</template>

<script setup lang="ts">
import { computed } from 'vue';

interface Props {
  // 当前日期值 (YYYY-MM-DD格式)
  modelValue?: string;
  // 占位符
  placeholder?: string;
  // 开始日期
  startDate?: string;
  // 结束日期
  endDate?: string;
  // 是否禁用
  disabled?: boolean;
  // 是否有错误
  hasError?: boolean;
  // 日期格式
  format?: 'YYYY-MM-DD' | 'YYYY/MM/DD' | 'MM/DD/YYYY';
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: '',
  placeholder: '请选择日期',
  startDate: '1900-01-01',
  endDate: '2100-12-31',
  disabled: false,
  hasError: false,
  format: 'YYYY-MM-DD',
});

const emit = defineEmits<{
  (e: 'update:modelValue', value: string): void;
  (e: 'change', value: string): void;
  (e: 'cancel'): void;
}>();

// 判断是否有值
const hasValue = computed(() => {
  return props.modelValue !== undefined && 
         props.modelValue !== null && 
         props.modelValue !== '';
});

// 显示的文本
const displayText = computed(() => {
  if (!hasValue.value) {
    return props.placeholder;
  }

  // 根据格式化要求处理日期显示
  if (props.format === 'YYYY/MM/DD') {
    return props.modelValue.replace(/-/g, '/');
  } else if (props.format === 'MM/DD/YYYY') {
    const parts = props.modelValue.split('-');
    if (parts.length === 3) {
      return `${parts[1]}/${parts[2]}/${parts[0]}`;
    }
  }

  return props.modelValue;
});

// 处理日期变化
const handleDateChange = (e: any) => {
  const value = e.detail.value;
  emit('update:modelValue', value);
  emit('change', value);
};

// 处理取消
const handleCancel = () => {
  emit('cancel');
};
</script>

<style lang="scss" scoped>
.xen-app-date-picker {
  width: 100%;

  .date-picker {
    width: 100%;
  }

  .date-picker-display {
    width: 100%;
    min-height: 42px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background-color: #ffffff;
    transition: all 0.3s ease;
    box-sizing: border-box;

    &.has-value {
      border-color: #d9d9d9;
    }

    &.has-error {
      border-color: #ff5252;
      background-color: #fff8f8;
    }

    &.disabled {
      background-color: #f5f5f5;
      border-color: #d9d9d9;
      opacity: 0.6;
    }

    &:active:not(.disabled) {
      background-color: #f9fafb;
      border-color: #7881de;
    }

    .date-picker-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 12px;
      min-height: 42px;
      box-sizing: border-box;

      .date-picker-text {
        flex: 1;
        font-size: 14px;
        color: #333;
        line-height: 1.5;
        word-break: break-all;
        padding: 8px 0;

        &.placeholder {
          color: #999;
        }
      }

      .uni-icons {
        flex-shrink: 0;
        margin-left: 8px;
      }
    }
  }

  // 禁用状态下的文本颜色
  .disabled .date-picker-text {
    color: #999 !important;
  }
}
</style>

